<template>
  <el-dialog
    v-el-drag-dialog
    class="tag-setting-dialog"
    :title="$t('标签设置')"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="dialogShow">
    <el-select-tree
      class="input-full pb-10"
      :data="treeData"
      :check-strictly="false"
      :default-expand-all="defaultExpandAll"
      :multiple="true"
      :props="{
        value: 'id',
        children: 'children',
        label: 'name'
      }"
      v-model="tagList"
      ></el-select-tree>
      <el-form
        label-width="95px"
        size="small"
        :show-message="false"
        :hide-required-asterisk="true"
        :status-icon="false">
        <template
          v-for="(itag) in innerTag">
          <el-form-item
            :key="itag.innerTagLabel"
            :label="itag.innerTagLabel"
            >
            <el-input v-model="itag.innerTagValue" clearable style="width: 180px"></el-input>
          </el-form-item>
        </template>
      </el-form>

    <template slot="footer">
      <bs-confirm-button-icon size="mini" @click.native="okClick" />
      <bs-cancel-button-icon size="mini" @click.native="cancelClick" />
    </template>
  </el-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapGetters }  = createNamespacedHelpers('media')

export default {
  name: 'tag-setting-dialog',
  props: {
    disableInnerTags: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogShow: false,
      tagList: [],
      tagId: [],
      innerTag: [],
      okCb: null,
      cancelCb: null,
      defaultExpandAll: true
    }
  },
  computed: {
    ...mapGetters(['dynTagTreeWithInner', 'dynTagTree']),
    treeData() {
      return this.disableInnerTags ? this.dynTagTree : this.dynTagTreeWithInner
    }
  },
  watch: {
    tagList(v) {
      const _tagId = []
      const _innerTag = []
      v.forEach(item => {
        const innerTag = item.split(':')[1]
        if (innerTag) {
          _innerTag.push({
            innerTagLabel: innerTag,
            innerTagValue: ''
          })
        } else {
          _tagId.push(item)
        }
      })
      this.innerTag = this._changeInnerTag(_innerTag, this.innerTag)
      this.tagId = _tagId
    }
  },
  methods: {
    _changeInnerTag(newInnerTag, oldInnerTag) {
      return newInnerTag.map(newInner => {
        const exist = oldInnerTag.find(old => old.innerTagLabel === newInner.innerTagLabel)
        if (exist) {
          return {
            ...exist
          }
        } else {
          return {
            ...newInner
          }
        }
      })
    },
    show({tagId, innerTag, okCb, cancelCb}) {
      this.tagId = [].concat(tagId)
      this.innerTag = [].concat(innerTag)
      this.tagList = [
        ...this.tagId,
        ...this.innerTag.map(item => `innerTag:${item.innerTagLabel}`)
      ]
      this.okCb = okCb
      this.cancelCb = cancelCb
      this.dialogShow = true
    },
    okClick() {

      if (this.innerTag.length > 0) {
        for (let i = 0; i < this.innerTag.length; i++) {
          if (!this.innerTag[i].innerTagValue) return this.$alert('提示', '内置标签需要填写')
        }
      }

      this.dialogShow = false
      this.okCb && this.okCb({
        innerTag: this.innerTag.slice(),
        tagId: this.tagId.slice()
      })
    },
    cancelClick() {
      this.dialogShow = false
      this.cancelCb && this.cancelCb()
    }

  }

}
</script>

<style lang="scss" scoped>
.tag-setting-dialog {
  ::v-deep .input-full {
    padding: 40px 10px 0 15px;
  }
  ::v-deep .el-form {
    margin-top: 15px;
    margin-left: 15px;
  }
  ::v-deep .el-dialog {
    width: 380px;
  }
  ::v-deep .el-select-tree {
      width: 300px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
  }
  ::v-deep .el-dialog__footer {
    border: 0px;
  }
  ::v-deep .el-input--mini {
    width: 220px;
  }
}
</style>
